// pages/ApiEndpointsPage.js
import React, { useState, useEffect } from 'react';
import {
  Box,
  List,
  ListItem,
  ListItemText,
  Stack,
} from '@mui/material';
import HubIcon from '@mui/icons-material/Hub';
import PublicOutlinedIcon from '@mui/icons-material/PublicOutlined';
import PublicOffOutlinedIcon from '@mui/icons-material/PublicOffOutlined';
import { TypeSection } from 'components/elements/TypeSections';
import { 
  HeroSection,
} from 'text/TemplateHeroText';
import { 
  CheckGetEndpoint, 
  CheckPostEndpoint, 
  CheckPutEndpoint, 
  CheckDeleteEndpoint,
} from 'api/status';

const ApiEndpointsPage = () => {
  const [endpointStatuses, setEndpointStatuses] = useState({});

  useEffect(() => {
    const checkAllEndpoints = async () => {
      // Auth endpoints - all POST
      const authLoginStatus = await CheckPostEndpoint('/auth/login');
      setEndpointStatuses(prev => ({ ...prev, '/auth/login': authLoginStatus.status }));
      
      const authSignupStatus = await CheckPostEndpoint('/auth/signup');
      setEndpointStatuses(prev => ({ ...prev, '/auth/signup': authSignupStatus.status }));
      
      const authManualSignupStatus = await CheckPostEndpoint('/auth/manual-signup');
      setEndpointStatuses(prev => ({ ...prev, '/auth/manual-signup': authManualSignupStatus.status }));
      
      const authSendActivationLinkStatus = await CheckPostEndpoint('/auth/send-activation-link');
      setEndpointStatuses(prev => ({ ...prev, '/auth/send-activation-link': authSendActivationLinkStatus.status }));
      
      const authActivateStatus = await CheckPostEndpoint('/auth/activate');
      setEndpointStatuses(prev => ({ ...prev, '/auth/activate': authActivateStatus.status }));
      
      const authSendForgotPasswordLinkStatus = await CheckPostEndpoint('/auth/send-forgot-password-link');
      setEndpointStatuses(prev => ({ ...prev, '/auth/send-forgot-password-link': authSendForgotPasswordLinkStatus.status }));
      
      const authResetPasswordStatus = await CheckPostEndpoint('/auth/reset-password');
      setEndpointStatuses(prev => ({ ...prev, '/auth/reset-password': authResetPasswordStatus.status }));
      
      const authSsoLoginStatus = await CheckPostEndpoint('/auth/sso-login');
      setEndpointStatuses(prev => ({ ...prev, '/auth/sso-login': authSsoLoginStatus.status }));
      
      const authRefreshTokenStatus = await CheckPostEndpoint('/auth/refresh-token');
      setEndpointStatuses(prev => ({ ...prev, '/auth/refresh-token': authRefreshTokenStatus.status }));
      
      // Users endpoints - mix of methods
      const usersMeGetStatus = await CheckGetEndpoint('/users/me');
      setEndpointStatuses(prev => ({ ...prev, '/users/me-GET': usersMeGetStatus.status }));
      
      const usersMePutStatus = await CheckPutEndpoint('/users/me');
      setEndpointStatuses(prev => ({ ...prev, '/users/me-PUT': usersMePutStatus.status }));
      
      const usersMeChangePasswordStatus = await CheckPutEndpoint('/users/me/change-password');
      setEndpointStatuses(prev => ({ ...prev, '/users/me/change-password': usersMeChangePasswordStatus.status }));
      
      const usersMeGenerateSsoStatus = await CheckPutEndpoint('/users/me/generate-sso');
      setEndpointStatuses(prev => ({ ...prev, '/users/me/generate-sso': usersMeGenerateSsoStatus.status }));
      
      const usersPostStatus = await CheckPostEndpoint('/users');
      setEndpointStatuses(prev => ({ ...prev, '/users-POST': usersPostStatus.status }));
      
      const usersGetStatus = await CheckGetEndpoint('/users');
      setEndpointStatuses(prev => ({ ...prev, '/users-GET': usersGetStatus.status }));
      
      const usersIdGetStatus = await CheckGetEndpoint('/users/:id');
      setEndpointStatuses(prev => ({ ...prev, '/users/:id-GET': usersIdGetStatus.status }));
      
      const usersIdPutStatus = await CheckPutEndpoint('/users/:id');
      setEndpointStatuses(prev => ({ ...prev, '/users/:id-PUT': usersIdPutStatus.status }));
      
      const usersIdDeleteStatus = await CheckDeleteEndpoint('/users/:id');
      setEndpointStatuses(prev => ({ ...prev, '/users/:id-DELETE': usersIdDeleteStatus.status }));
      
      // Accounts endpoints
      const accountsIdGetStatus = await CheckGetEndpoint('/accounts/:id');
      setEndpointStatuses(prev => ({ ...prev, '/accounts/:id-GET': accountsIdGetStatus.status }));
      
      const accountsIdPutStatus = await CheckPutEndpoint('/accounts/:id');
      setEndpointStatuses(prev => ({ ...prev, '/accounts/:id-PUT': accountsIdPutStatus.status }));
      
      // Teams endpoints
      const teamsGetStatus = await CheckGetEndpoint('/teams');
      setEndpointStatuses(prev => ({ ...prev, '/teams-GET': teamsGetStatus.status }));
      
      const teamsIdGetStatus = await CheckGetEndpoint('/teams/:id');
      setEndpointStatuses(prev => ({ ...prev, '/teams/:id-GET': teamsIdGetStatus.status }));
      
      const teamsPostStatus = await CheckPostEndpoint('/teams');
      setEndpointStatuses(prev => ({ ...prev, '/teams-POST': teamsPostStatus.status }));
      
      const teamsIdPutStatus = await CheckPutEndpoint('/teams/:id');
      setEndpointStatuses(prev => ({ ...prev, '/teams/:id-PUT': teamsIdPutStatus.status }));
      
      const teamsIdDeleteStatus = await CheckDeleteEndpoint('/teams/:id');
      setEndpointStatuses(prev => ({ ...prev, '/teams/:id-DELETE': teamsIdDeleteStatus.status }));
      
      const teamsIdAddUserStatus = await CheckPutEndpoint('/teams/:id/add-user/:userId');
      setEndpointStatuses(prev => ({ ...prev, '/teams/:id/add-user/:userId': teamsIdAddUserStatus.status }));
      
      const teamsIdRemoveUserStatus = await CheckPutEndpoint('/teams/:id/remove-user/:userId');
      setEndpointStatuses(prev => ({ ...prev, '/teams/:id/remove-user/:userId': teamsIdRemoveUserStatus.status }));
      
      // Stripe endpoints
      const stripePlansGetStatus = await CheckGetEndpoint('/stripe/plans');
      setEndpointStatuses(prev => ({ ...prev, '/stripe/plans': stripePlansGetStatus.status }));
      
      const stripeSubscriptionsPostStatus = await CheckPostEndpoint('/stripe/subscriptions');
      setEndpointStatuses(prev => ({ ...prev, '/stripe/subscriptions-POST': stripeSubscriptionsPostStatus.status }));
      
      const stripeSubscriptionsDeleteStatus = await CheckDeleteEndpoint('/stripe/subscriptions');
      setEndpointStatuses(prev => ({ ...prev, '/stripe/subscriptions-DELETE': stripeSubscriptionsDeleteStatus.status }));
      
      const stripeCustomersMeStatus = await CheckGetEndpoint('/stripe/customers/me');
      setEndpointStatuses(prev => ({ ...prev, '/stripe/customers/me': stripeCustomersMeStatus.status }));
      
      const stripeCustomersMeInvoicesStatus = await CheckGetEndpoint('/stripe/customers/me/invoices');
      setEndpointStatuses(prev => ({ ...prev, '/stripe/customers/me/invoices': stripeCustomersMeInvoicesStatus.status }));
      
      const stripeCustomersMeCardsStatus = await CheckGetEndpoint('/stripe/customers/me/cards');
      setEndpointStatuses(prev => ({ ...prev, '/stripe/customers/me/cards': stripeCustomersMeCardsStatus.status }));
      
      const stripeCreateSetupIntentStatus = await CheckPostEndpoint('/stripe/create-setup-intent');
      setEndpointStatuses(prev => ({ ...prev, '/stripe/create-setup-intent': stripeCreateSetupIntentStatus.status }));
      
      const stripeCardsDeleteStatus = await CheckDeleteEndpoint('/stripe/cards');
      setEndpointStatuses(prev => ({ ...prev, '/stripe/cards-DELETE': stripeCardsDeleteStatus.status }));
      
      const stripeCardsPutStatus = await CheckPutEndpoint('/stripe/cards');
      setEndpointStatuses(prev => ({ ...prev, '/stripe/cards-PUT': stripeCardsPutStatus.status }));
      
      const stripeCreateCustomerCheckoutSessionStatus = await CheckPostEndpoint('/stripe/create-customer-checkout-session');
      setEndpointStatuses(prev => ({ ...prev, '/stripe/create-customer-checkout-session': stripeCreateCustomerCheckoutSessionStatus.status }));
      
      const stripeCreateCustomerPortalSessionStatus = await CheckPostEndpoint('/stripe/create-customer-portal-session');
      setEndpointStatuses(prev => ({ ...prev, '/stripe/create-customer-portal-session': stripeCreateCustomerPortalSessionStatus.status }));
      
      const stripeWebhookStatus = await CheckPostEndpoint('/stripe/webhook');
      setEndpointStatuses(prev => ({ ...prev, '/stripe/webhook': stripeWebhookStatus.status }));
    };

    checkAllEndpoints();
  }, []);

  const getStatusIcon = (path, method) => {
    // Remove /api/v1 prefix from the path
    const trimmedPath = path.replace('/api/v1', '');
    
    // For endpoints with same path but different methods, we need to use composite keys
    if (method === 'GET' && (
        trimmedPath === '/users/me' || 
        trimmedPath === '/users' || 
        trimmedPath === '/users/:id' || 
        trimmedPath === '/accounts/:id' || 
        trimmedPath === '/teams' ||
        trimmedPath === '/teams/:id'
    )) {
      const key = `${trimmedPath}-GET`;
      return endpointStatuses[key] === 'online' ? 
        <PublicOutlinedIcon color="primary" fontSize="small" /> : 
        <PublicOffOutlinedIcon color="disabled" fontSize="small" />;
    }
    
    if (method === 'PUT' && (
        trimmedPath === '/users/me' || 
        trimmedPath === '/users/:id' || 
        trimmedPath === '/accounts/:id' || 
        trimmedPath === '/teams/:id' || 
        trimmedPath === '/stripe/cards'
    )) {
      const key = `${trimmedPath}-PUT`;
      return endpointStatuses[key] === 'online' ? 
        <PublicOutlinedIcon color="primary" fontSize="small" /> : 
        <PublicOffOutlinedIcon color="disabled" fontSize="small" />;
    }
    
    if (method === 'POST' && (
        trimmedPath === '/users' || 
        trimmedPath === '/teams' || 
        trimmedPath === '/stripe/subscriptions'
    )) {
      const key = `${trimmedPath}-POST`;
      return endpointStatuses[key] === 'online' ? 
        <PublicOutlinedIcon color="primary" fontSize="small" /> : 
        <PublicOffOutlinedIcon color="disabled" fontSize="small" />;
    }
    
    if (method === 'DELETE' && (
        trimmedPath === '/users/:id' || 
        trimmedPath === '/teams/:id' || 
        trimmedPath === '/stripe/subscriptions' ||
        trimmedPath === '/stripe/cards'
    )) {
      const key = `${trimmedPath}-DELETE`;
      return endpointStatuses[key] === 'online' ? 
        <PublicOutlinedIcon color="primary" fontSize="small" /> : 
        <PublicOffOutlinedIcon color="disabled" fontSize="small" />;
    }
    
    // Default case for endpoints with unique paths
    return endpointStatuses[trimmedPath] === 'online' ? 
      <PublicOutlinedIcon color="primary" fontSize="small" /> : 
      <PublicOffOutlinedIcon color="disabled" fontSize="small" />;
  };

  return (
    <Box
      sx={{
        width: '100%',
        maxWidth: '1200px',
        minHeight: '100vh',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 4,
      }}
    >
      <TypeSection
        paddingY={10}
        paddingX={1}
        text={<HeroSection 
          text="Your new list of api endpoints"    
          icon={HubIcon}
        />}
      />  

      <TypeSection
        paddingY={10}
        paddingX={1}
        text={
          <List sx={{ width: '100%', bgcolor: 'background.paper', padding: 0 }}>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/auth/login - POST" />
                {getStatusIcon('/api/v1/auth/login', 'POST')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/auth/signup - POST" />
                {getStatusIcon('/api/v1/auth/signup', 'POST')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/auth/manual-signup - POST" />
                {getStatusIcon('/api/v1/auth/manual-signup', 'POST')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/auth/send-activation-link - POST" />
                {getStatusIcon('/api/v1/auth/send-activation-link', 'POST')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/auth/activate/ - POST" />
                {getStatusIcon('/api/v1/auth/activate/', 'POST')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/auth/send-forgot-password-link - POST" />
                {getStatusIcon('/api/v1/auth/send-forgot-password-link', 'POST')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/auth/reset-password - POST" />
                {getStatusIcon('/api/v1/auth/reset-password', 'POST')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/auth/sso-login - POST" />
                {getStatusIcon('/api/v1/auth/sso-login', 'POST')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/auth/refresh-token - POST" />
                {getStatusIcon('/api/v1/auth/refresh-token', 'POST')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/users/me - GET" />
                {getStatusIcon('/api/v1/users/me', 'GET')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/users/me - PUT" />
                {getStatusIcon('/api/v1/users/me', 'PUT')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/users/me/change-password - PUT" />
                {getStatusIcon('/api/v1/users/me/change-password', 'PUT')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/users/me/generate-sso - PUT" />
                {getStatusIcon('/api/v1/users/me/generate-sso', 'PUT')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/users - POST" />
                {getStatusIcon('/api/v1/users', 'POST')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/users - GET" />
                {getStatusIcon('/api/v1/users', 'GET')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/users/:id - GET" />
                {getStatusIcon('/api/v1/users/:id', 'GET')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/users/:id - PUT" />
                {getStatusIcon('/api/v1/users/:id', 'PUT')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/users/:id - DELETE" />
                {getStatusIcon('/api/v1/users/:id', 'DELETE')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/accounts/:id - GET" />
                {getStatusIcon('/api/v1/accounts/:id', 'GET')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/accounts/:id - PUT" />
                {getStatusIcon('/api/v1/accounts/:id', 'PUT')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/teams - GET" />
                {getStatusIcon('/api/v1/teams', 'GET')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/teams/:id - GET" />
                {getStatusIcon('/api/v1/teams/:id', 'GET')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/teams - POST" />
                {getStatusIcon('/api/v1/teams', 'POST')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/teams/:id - PUT" />
                {getStatusIcon('/api/v1/teams/:id', 'PUT')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/teams/:id - DELETE" />
                {getStatusIcon('/api/v1/teams/:id', 'DELETE')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/teams/:id/add-user/:userId - PUT" />
                {getStatusIcon('/api/v1/teams/:id/add-user/:userId', 'PUT')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/teams/:id/remove-user/:userId - PUT" />
                {getStatusIcon('/api/v1/teams/:id/remove-user/:userId', 'PUT')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/stripe/plans - GET" />
                {getStatusIcon('/api/v1/stripe/plans', 'GET')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/stripe/subscriptions - POST" />
                {getStatusIcon('/api/v1/stripe/subscriptions', 'POST')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/stripe/subscriptions - DELETE" />
                {getStatusIcon('/api/v1/stripe/subscriptions', 'DELETE')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/stripe/customers/me - GET" />
                {getStatusIcon('/api/v1/stripe/customers/me', 'GET')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/stripe/customers/me/invoices - GET" />
                {getStatusIcon('/api/v1/stripe/customers/me/invoices', 'GET')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/stripe/customers/me/cards - GET" />
                {getStatusIcon('/api/v1/stripe/customers/me/cards', 'GET')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/stripe/create-setup-intent - POST" />
                {getStatusIcon('/api/v1/stripe/create-setup-intent', 'POST')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/stripe/cards - DELETE" />
                {getStatusIcon('/api/v1/stripe/cards', 'DELETE')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/stripe/cards - PUT" />
                {getStatusIcon('/api/v1/stripe/cards', 'PUT')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/stripe/create-customer-checkout-session - POST" />
                {getStatusIcon('/api/v1/stripe/create-customer-checkout-session', 'POST')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/stripe/create-customer-portal-session - POST" />
                {getStatusIcon('/api/v1/stripe/create-customer-portal-session', 'POST')}
              </Stack>
            </ListItem>
            <ListItem sx={{ padding: '0px', minHeight: 'unset' }}>
              <Stack direction="row" spacing={1} alignItems="center">
                <ListItemText primary="/api/v1/stripe/webhook - POST" />
                {getStatusIcon('/api/v1/stripe/webhook', 'POST')}
              </Stack>
            </ListItem>
          </List>
        }
      />
    </Box>
  );
};

export default ApiEndpointsPage;